<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
       	<link rel="stylesheet" type="text/css" href="小米.css"/>
	  <script type="text/javascript" src="jquery-3.0.0.js" ></script>
	
	
	</head>
	<body>
	<div class="div">
		<div class="divbox">
			<ul >
			<li>小米手机</li>
				<li>红米</li>	
					<li>平板/电脑</li>	
						<li>电视</li>	
						<li>盒子/影音</li>	
						<li>路由器</li>	
						<li>智能硬件</li>	
						<li>服务</li>
						<li>社区</li>
			</ul>	
		</div>
		</div>
	    <div class="divdown"></div>
	  
	
	<script>
		$(function(){
			$("li").mouseover(function(){
			 $("li").index(this);
			$(".divdown").slideDown	()
		})
		$("li").mouseleave(function(){
			$("li").index(this);
			$(".divdown").slideUp() 
		})	
		})
	</script>
	<div class="div1">
		<div class="div1box">
			<div class="div1boxleft">
				<div class="div1boxlefttext">手机 电话卡</div>
				<div class="div1boxlefttext">笔记本 平板</div>
				<div class="div1boxlefttext">电视 盒子</div>
				<div class="div1boxlefttext">路由器 智能硬件</div>
				<div class="div1boxlefttext">移动电源 电池 插盘线</div>
				<div class="div1boxlefttext">耳机 音响</div>
				<div class="div1boxlefttext">保护套 贴膜</div>
				<div class="div1boxlefttext">线材 书架 存储卡</div>
				<div class="div1boxlefttext">箱包 服饰</div>
				<div class="div1boxlefttext">米兔 周边生活</div>
				
			</div>
		<div class="div1boxleftup"></div>
		<script>
		$(function(){
			$(".div1boxlefttext").mouseover(function(){
			 $(".div1boxlefttext").index(this);
			$(".div1boxleftup").show	()
		})
		$(".div1boxlefttext").mouseleave(function(){
			$(".div1boxlefttext").index(this);
			$(".div1boxleftup").hide	() 
		})	
		})
	</script>	
			
			
			<div class="div1boxright">
	<div class="divss">
		<div style="width: 1000px;height: 470px;overflow: hidden;">
		<span class="span">  
		<img style="background-image: url(小米版4.jpg);background-repeat: no-repeat;" />
		<img style="background-image: url(小米版1.jpg);background-repeat: no-repeat;" />
		<img style="background-image: url(小米版2.jpg) ;background-repeat: no-repeat;" />
		<img style="background-image: url(小米版3.jpg) ;background-repeat: no-repeat;" />
		<img style="background-image: url(小米版4.jpg);background-repeat: no-repeat;" />
		</span>
		</div>
		<input type="button" value="1" / style="width: 20px;height: 20px;border-radius: 300px;">
		<input type="button" value="2" />
		<input type="button" value="3" />
		<input type="button" value="4" />
		<input type="button" value="5" />
	</div>
	
	
	
	
	
	
	<script>
		var n=0
		function run(){
			if(n<5){n++}else{
				n=1;
				$(".span").css({left:0})
			}
		$(".span").stop(true,true).animate({left:-800*n},1000)
		}
		var q =setInterval(run,2000)
		$("input").click(
			function(){
				clearInterval(q)
				n=$("input").index(this )
				$(".span").stop(true,true).animate({left:-800*n},1000)
			setTimeout(function(){
				clearInterval(q)
				q=setInterval(run,2000)
			},2000)
			
			}
			
		)
	</script>
			</div>
		</div>
	</div>
	<div class="div2">
		<div class="div2box">
			<div class="div2boxflont"></div>
			<div class="div2boxflont1"></div>
			<div class="div2boxflont1"></div>
			<div class="div2boxflont1"></div>
		</div>
	</div>
	
 
	</body>
</html>
